<ion-header>
  <ion-navbar>
    <ion-buttons left>
      <button ion-button icon-only>
        <ion-icon name="md-search"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title text-center>
      {{ 'APPNAME' | translate }}
    </ion-title>
    <ion-buttons right>
      <button ion-button icon-only>
        <ion-icon name="md-locate"></ion-icon>
        <span *ngIf="location.city != null">{{location.city}}</span>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <!-- 下拉刷新 -->
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content refreshingText="{{ 'REFRESHINGTEXT' | translate }}" pullingText="{{'REFRESHINGTIP'|translate}}">

    </ion-refresher-content>
  </ion-refresher>
  <!-- 菜单 -->
  <ion-grid>
    <ion-row text-center>
      <ion-col col-4 *ngFor="let menu of menus" (click)="testToDetailsPage()">
        <tiny-menu [menu]="menu"></tiny-menu>
        <!--自定义组件 -->
      </ion-col>
    </ion-row>
  </ion-grid>
  <!-- 主页内容 -->
  <ion-list margin-top>
    <p *ngIf="items == null" text-center class="color-ignore">{{'LOADERRORTEXT'|translate}}
      <a href="#" no-padding>{{'REFRESHINGTEXT'|translate}}</a>
    </p>
    <p *ngIf="items != null" text-center color="primary">
      {{'HOME.findForYouText'|translate}}
    </p>
    <!-- 跳转details页面 -->
    <ion-item *ngFor="let item of items" (click)="toDetails(item)">
      <ion-thumbnail item-start>
        <img src="{{item.img}}">
      </ion-thumbnail>
      <h2 style="margin-top:0px;">{{item.name}}</h2>
      <p>{{item.address}}</p>
      <ion-badge style="font-size:5px;">免押金</ion-badge>
      <ion-badge style="font-size:5px;"></ion-badge>
      <button ion-button clear item-end style="color:red;">{{item.price}}/{{'MOUTH'|translate}}</button>
    </ion-item>


  </ion-list>
</ion-content>
